<template>
  <div class="site">
    <div>
      <el-radio v-model="formData.type" label="2">HTML标签验证</el-radio>
      <el-radio v-model="formData.type" label="1">文件验证</el-radio>
    </div>

    <div v-if="formData.type=='2'">
      <div class="con">
        <div v-for="(text,index) in t1s" :class="'txt'+(index+1)">{{text}}</div>
      </div>
      <div class="txt1">查看示例</div>
      <div class="content">
        <span v-for="txt in t2s">{{txt}}</span>
      </div>

    </div>

    <div v-else class="con">
      <div class="txt1">文件验证</div>
      <div class="content2">
        1. 请点击下载验证文件获取验证文件（当前最新：<span class="txt5"> <a target="_blank" href="http://xinzhu.oss-cn-shanghai.aliyuncs.com/xz60e23bd630e20.zip">baidu_verify_code-sJP1EO2A6u.html</a></span>）
        <br>2. 将验证文件放置于您所配置域名({{formData.head+formData.link}})的根目录下
        <br>3. 点击这里确认验证文件可以正常访问
        <br>4. 请点击“完成验证”按钮
      </div>
    </div>
    <div class="txt4">为保持验证通过的状态,成功验证后请不要删除该标签</div>
  </div>
</template>

<script>
  import Breadcrumb from '@/components/Breadcrumb'
  import Hamburger from '@/components/Hamburger'
  export default {
    components: {
      Breadcrumb,
      Hamburger
    },
    props: {
      formData:Object
    },
    computed: {
    },

    data(){


      return{
      t1s:[
        "HTML标签验证",
        '将以下代码添加到您的网站首页HTML代码的<head>标签与</head>标签之间，完成操作后请点击“验证”按钮。',
        '<meta name=\"xz-site-verification\" content=\"code-xz60e23bd630e20\" />',
      ],
        t2s:[
          '<html>',
          '<head>',
          '<meta name="xz-site-verification" content="code-xz60e23bd630e20" />',
          '<title>My title</title>',
          '</head>',
          '<body>',
          'page contents',
          '</body>',
          '</html>',
        ],




      }
    },

    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .site{
    width: 760px;
    margin: auto;
    .con{
      margin: 1rem 0;

      .txt2{
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #666666;
        line-height: 30px;
        margin-bottom: 2rem;
      }
      .txt3{
        background: #FFFFFF;
        border: 1px solid #D5D8DA;
        border-radius: 10px;
        padding: 20px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFB128;
        line-height: 30px;
      }
    }
    .txt1{
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 600;
      color: #333333;
      line-height: 30px;
    }
    .content{
      position: relative;
      display: flex;
      background-color: rgba(213, 216, 218, 0.15);
      border-radius: 10px;
      padding: 20px;
      flex-direction: column;
      margin: 1rem 0;

      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #666666;
      line-height: 30px;
    }
    .content2{
      position: relative;
      background-color: white;
      border-radius: 10px;
      border: 1px solid #D5D8DA;
      padding: 20px;
      margin: 1rem 0;

      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #666666;
      line-height: 30px;
    }


    .txt4{
      font-family: Source Han Sans CN;
      font-size: 12px;
      font-weight: 400;
      color: #FF1F34;
      line-height: 30px;
    }

    .txt5{
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #FFB128;
      line-height: 30px;
    }
  }
</style>
